<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
        <meta name="format-detection" content="telephone=no"/>
		<meta name="format-detection" content="email=no">
		<meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
		<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
		<meta HTTP-EQUIV="Expires" CONTENT="0"> 
		<title>毅瑭科技</title>
		<link rel="stylesheet" type="text/css" href="../common/css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/checkin.css"/>
		<link rel="stylesheet" href="../common/css/animate.min.css" />
		<link rel="stylesheet" href="../common/css/syalert.min.css" />
		<link rel="stylesheet" type="text/css" href="../common/css/js_msg.css"/>
	</head>
	<body>
		<div class="main">
			<div class="main_scroll">
				<!--照片打卡-->
				<div class="checkin_top">
					<div class="checkin_date flex fontsize-sm">
						<span>日期：<span class='checkin_date_span'></span></span>
						<div class="checkin_recordtime">
							
						</div>
					</div>
					<div class="checkin_upload">
						<div class="checkin_upload_top flex fontsize-title color_blue">
							<span></span>
							<div class="checkin_tip flex">
								<img src="img/tip.png"/>
							</div>
						</div>
						<div class="checkin_upload_default imgFileUploade">
							<!--<input type="file" name="photo" id="photo" class="imgFiles" style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple>-->
							<input type="file" name="photo" id="photo" class="imgFiles" style="display: none" accept="image/*" mutiple="mutiple">
							
							<div class="header">
								<img src="img/checkin/camera.png" class="imgClick"/>
								<p>用照片记录每一次变化</p>
							</div>
							<div class="imgAll">
							    <ul>
							    </ul>
							</div>
						</div>
						
						<!--睡眠图片-->
						<div class="sleep_notice" style="display: none;">
							<img src="img/checkin/sleep_bg.png"/>
						</div>
					</div>
				</div>
				
				<div class="checkin_template">
					<p class="checkin_templat_title fontsize-ml"><span></span></p>
					
					<!------分类打卡------>
					<!--血糖打卡-->
					<div class="checkin_sugar hide">
						<p class="checkin_sugar_text color_blue">
							<span class="sugar_ruler_value fontsize-xl">0.0</span>
							<span>mmol/L</span>
						</p>
						<!--<input id="sugar_ruler_value" class="text-input" type="text" readonly value="">-->
						<!-- 刻度尺容器(必要的) -->
						<div class="ruler-wrap" style="width: 100%;" id="sugar_ruler"></div>
					</div>
					
					<!--饮食打卡-->
					<div class="checkin_diet checkin_tips fontsize hide"></div>
					
					<!--运动打卡-->
					<div class="checkin_sport hide">
						<div class="checkin_sport_top flex">
							<ul class="checkin_sport_top_ul">
								<li class="checkin_sport_top_li_active" data-type='1'></li>
								<li data-type='2'></li>
							</ul>
							<!--<p class="color_blue"><span class="checkin_sport_step fontsize-xl">6859</span>步</p>-->
						</div>
						<ul class="checkin_sport_category">
						</ul>
					</div>
					
					<!--用药打卡-->
					<div class="checkin_pill checkin_tips fontsize hide"></div>
					
					<!--血压打卡-->
					<div class="checkin_pressure hide">
						<!--高血压刻度尺-->
						<div class="checkin_highpressure">
							<p class="checkin_checkin_pressure_text">
								<span>高压（收缩压）：</span>
								<span class="checkin_pressure_ruler_value high_pressure fontsize-xl color_blue">0</span>
								<span class="color_blue">mmHg</span>
							</p>
							<!--<input id="sugar_ruler_value" class="text-input" type="text" readonly value="">-->
							<!-- 刻度尺容器(必要的) -->
							<div class="ruler-wrap" style="width: 100%;" id="checkin_highpressure_ruler"></div>
						</div>
						<!--低压刻度尺-->
						<div class="checkin_lowpressure">
							<p class="checkin_checkin_pressure_text">
								<span>低压（舒张压）：</span>
								<span class="checkin_pressure_ruler_value low_pressure fontsize-xl color_blue">0</span>
								<span class="color_blue">mmHg</span>
							</p>
							<!--<input id="sugar_ruler_value" class="text-input" type="text" readonly value="">-->
							<!-- 刻度尺容器(必要的) -->
							<div class="ruler-wrap" style="width: 100%;" id="checkin_lowpressure_ruler"></div>
						</div>
						<!--心率刻度尺-->
						<div class="checkin_hrpressure">
							<p class="checkin_checkin_pressure_text">
								<span>心率：</span>
								<span class="checkin_pressure_ruler_value heart_rate fontsize-xl color_blue">0</span>
								<span class="color_blue">次/分</span>
							</p>
							<!--<input id="sugar_ruler_value" class="text-input" type="text" readonly value="">-->
							<!-- 刻度尺容器(必要的) -->
							<div class="ruler-wrap" style="width: 100%;" id="checkin_heart_rate_ruler"></div>
						</div>
						
					</div>
				
					<!--体重打卡-->
					<div class="checkin_weight hide">
						<p class="checkin_weight_text color_blue">
							<span class="weight_ruler_value fontsize-xl">0.0</span>
							<span>公斤</span>
						</p>
						<!--<input id="sugar_ruler_value" class="text-input" type="text" readonly value="">-->
						<!-- 刻度尺容器(必要的) -->
						<div class="ruler-wrap" style="width: 100%;" id="weight_ruler"></div>
					</div>
					
					<!--腰围打卡-->
					<div class="checkin_waist hide">
						<p class="checkin_waist_text color_blue">
							<span class="waist_ruler_value fontsize-xl">0.0</span>
							<span>厘米</span>
						</p>
						<!--<input id="sugar_ruler_value" class="text-input" type="text" readonly value="">-->
						<!-- 刻度尺容器(必要的) -->
						<div class="ruler-wrap" style="width: 100%;" id="waist_ruler"></div>
					</div>
				
					<!--尿酮打卡-->
					<div class="checkin_ketone flex hide">
						<ul class="checkin_ketone_ul">
							<li class="on" data-type='1'>
								<img src="img/checkin/color1.png"/>
								<span>-</span>
							</li>
							<li data-type='2'>
								<img src="img/checkin/color2.png"/>
								<span>±(0.5)</span>
							</li>
							<li data-type='3'>
								<img src="img/checkin/color3.png"/>
								<span>±(1.5)</span>
							</li>
							<li data-type='4'>
								<img src="img/checkin/color4.png"/>
								<span>++(4.0)</span>
							</li>
							<li data-type='5'>
								<img src="img/checkin/color5.png"/>
								<span>+++(8.0)</span>
							</li>
							
						</ul>
					</div>
					<!--<div class="img_link flex hide">
						<img src="img/checkin/link.png"/>
						<img src="img/checkin/link.png"/>
					</div>-->
					<div class="checkin_keton_method hide">
						<p class="checkin_keton_method_title fontsize-ml">尿酮检测方法</p>
						<div class="checkin_keton_method_img">
							<img src="img/checkin/step.png"/>
						</div>
						<div class="checkin_keton_method_detail">
							<p>1.取出试纸并确认无受潮或损坏；</p>
							<p>2.将试纸的测试端放入采集的尿液中；</p>
							<p>3.1-2秒后从尿液中取出试纸，等待30秒；</p>
							<p>4.试纸测试端与测卡做对比，得出测试结果；</p>
						</div>
						<div class="checkin_keton_btn">
							<button class="fontsize-btn">提交</button>
						</div>
						
					</div>
				
					<!--胰岛素打卡-->
					<div class="checkin_ins checkin_tips fontsize hide"></div>
					
					<!--睡眠打卡-->
					<div class="checkin_sleep hide">
						<!--睡眠刻度尺-->
						<p class="checkin_sleep_text">
							<span style="display: inline-block;width: 46%;">晚睡天数：</span>
							<span class="checkin_sleep_value fontsize-xl color_blue">0</span>
							<span class="color_blue">天</span>
						</p>
						<!--<input id="sugar_ruler_value" class="text-input" type="text" readonly value="">-->
						<!-- 刻度尺容器(必要的) -->
						<div class="ruler-wrap" style="width: 100%;" id="checkin_sleep_ruler"></div>
					</div>
				
				</div>
			
			</div>
			<!--普通打卡-->
			<div class="checkin_bottom">
				<button class="fontsize-btn">打卡</button>
			</div>
	<!--血压打卡-->
			<div class="checkin_pressure_bottom hide">
				<button class="fontsize-btn">打卡</button>
			</div>
		</div>
		
		<div class="sy-alert sy-alert-tips animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="tips" sy-mask="false" id="alert3"> 
		  <div class="sy-content">最多上传5张照片</div>
		</div>
		
	</body>
</html>
<script src="../common/js/jquery-3.6.0.min.js"></script>
<script src="../common/js/url.min.js"></script>
<script src="../common/js/dream-msg.min.js"></script>
<script src="../base.js"></script>
<script src="js/iconfont.js"></script>
<script src="js/checkin.js"></script>
<script src="../common/js/syalert.min.js"></script>
<script src="../common/js/imgFileupload.js"></script>
<script src="../common/js/ruler.js"></script>
<script type="text/javascript">
//	图片展示
	var imgFile = new ImgUploadeFiles('.checkin_upload',function(e){
		this.init({
			MAX : 5, //限制个数
			MH : 900, //像素限制高度
			MW : 800, //像素限制宽度
			callback : function(arr){
			}
		});
	});
		
	$(function(){
		
		
	    //调用刻度尺方法 血糖
	    ruler.initPlugin({
	        el: "sugar_ruler", //容器id
	        height: 50, //刻度尺高度
	        maxScale: 400, //最大刻度
	        startValue: 0, //刻度开始的初始值
	        region: [0,360], //选择刻度的区间范围
	        background: "#FAFAFA", //刻度尺背景色
	        color: "#575757", //刻度线和字体的颜色
	        markColor: "#005BAC", //中心刻度标记颜色
	        isConstant: true, //是否不断地获取值
	        success: function (res) {
	            console.log(res);
	            $('.sugar_ruler_value').text(res)
	        }
	    });

//	    高血压刻度尺
	    ruler.initPlugin({
	        el: "checkin_highpressure_ruler", //容器id
	        height: 50, //刻度尺高度
	        maxScale: 280, //最大刻度
	        startValue: 0, //刻度开始的初始值
	        region: [0,220], //选择刻度的区间范围
	        background: "#FAFAFA", //刻度尺背景色
	        color: "#575757", //刻度线和字体的颜色
	        markColor: "#005BAC", //中心刻度标记颜色
	        isConstant: true, //是否不断地获取值
	        success: function (res) {
	            console.log(res);
	            $('.high_pressure').text(res)
	        }
	    });
//	    低压刻度尺
	    ruler.initPlugin({
	        el: "checkin_lowpressure_ruler", //容器id
	        height: 50, //刻度尺高度
	        maxScale: 180, //最大刻度
	        startValue: 0, //刻度开始的初始值
	        region: [0,160], //选择刻度的区间范围
	        background: "#FAFAFA", //刻度尺背景色
	        color: "#575757", //刻度线和字体的颜色
	        markColor: "#005BAC", //中心刻度标记颜色
	        isConstant: true, //是否不断地获取值
	        success: function (res) {
	            console.log(res);
	            $('.low_pressure').text(res)
	        }
	    });
//	    心率刻度尺
	    ruler.initPlugin({
	        el: "checkin_heart_rate_ruler", //容器id
	        height: 50, //刻度尺高度
	        maxScale: 200, //最大刻度
	        startValue: 0, //刻度开始的初始值
	        region: [0,160], //选择刻度的区间范围
	        background: "#FAFAFA", //刻度尺背景色
	        color: "#575757", //刻度线和字体的颜色
	        markColor: "#005BAC", //中心刻度标记颜色
	        isConstant: true, //是否不断地获取值
	        success: function (res) {
	            console.log(res);
	            $('.heart_rate').text(res)
	        }
	    });
    
		//体重
	    ruler.initPlugin({
	        el: "weight_ruler", //容器id
	        height: 50, //刻度尺高度
	        maxScale: 2500, //最大刻度
	        startValue: 0, //刻度开始的初始值
	        region: [0,2200], //选择刻度的区间范围
	        background: "#FAFAFA", //刻度尺背景色
	        color: "#575757", //刻度线和字体的颜色
	        markColor: "#005BAC", //中心刻度标记颜色
	        isConstant: true, //是否不断地获取值
	        success: function (res) {
	            console.log(res);
	            $('.weight_ruler_value').text(res)
	        }
	    });
	
		//腰围
	    ruler.initPlugin({
	        el: "waist_ruler", //容器id
	        height: 50, //刻度尺高度
	        maxScale: 2000, //最大刻度
	        startValue: 0, //刻度开始的初始值
	        region: [0,1600], //选择刻度的区间范围
	        background: "#FAFAFA", //刻度尺背景色
	        color: "#575757", //刻度线和字体的颜色
	        markColor: "#005BAC", //中心刻度标记颜色
	        isConstant: true, //是否不断地获取值
	        success: function (res) {
	            console.log(res);
	            $('.waist_ruler_value').text(res)
	        }
	    });
	    
//	   睡眠刻度尺
	    ruler.initPlugin({
	        el: "checkin_sleep_ruler", //容器id
	        height: 50, //刻度尺高度
	        maxScale: 8, //最大刻度
	        startValue: 0, //刻度开始的初始值
	        region: [0,7], //选择刻度的区间范围
	        background: "#FAFAFA", //刻度尺背景色
	        color: "#575757", //刻度线和字体的颜色
	        markColor: "#005BAC", //中心刻度标记颜色
	        isConstant: true, //是否不断地获取值
	        success: function (res) {
	            console.log(res);
	            $('.checkin_sleep_value').text(Math.ceil(res))
//	            if(res)
	        }
	    });
	});
</script>